<template>
    <el-dialog v-model="dialogVisible" class="box" width="30%">
        <img w-full :src="dialogImageUrl" class="previewImg" />
    </el-dialog>
  </template>
  
<script setup>
import { ref } from 'vue'


const dialogVisible = ref(false)
const dialogImageUrl = ref('')

// 打开
const open = (url = '') => {
    dialogVisible.value = true
    dialogImageUrl.value = url
}
// 关闭
const close = () => {
    dialogVisible.value = false
    dialogImageUrl.value = ''
}

// 组件实例
defineExpose({
    open,
    close
})
</script>

<style lang="scss" scoped>
.box {
    overflow: auto;
}

.previewImg {
    scale: 0.7;
    object-fit: fill;
}
</style>
  